<template>
  <div>
    <audio
      id="audioAnswer"
      class="c-pf c-p-l-100"
    ></audio>
    <open-modal
      :openModal="showAnswerModal"
      :isShowPf="isShowPf"
    >
      <div class="c-w100 c-bg-white c-flex-column c-ph24 c-hh760">
        <div class="c-flex-row c-justify-sa c-aligni-center c-bg-white c-pv26 c-bd-b1 c-p">
          <my-small-tabbar
            class="c-bg-white c-w80"
            :tabList="tabMediaList"
            :tabIndex="modalType"
            @changeTab="changeModalType"
            :flexClass="'c-justify-sb'"
          ></my-small-tabbar>
          <div
            class="iconfont c-fs20 c-fc-gray"
            @click="closeAnswerModal"
          >&#xe61b;</div>
        </div>
        <!-- 回答语音 -->
        <div v-show="modalType == 2">
          <div class="c-pt60 c-fs20 c-fc-gray c-textAlign-c">录音最长1分钟</div>
          <div class="c-pt120 c-pb100 c-flex-column c-flex-center">
            <div
              @click="clickStartRecord"
              v-show="recordStatus == 'RECORD_START'"
              class="c-ww160 c-hh160 c-brp50 bg-green c-opacity90 c-flex-row c-flex-center"
            >
              <span class="iconfont c-fs56 c-fc-white">&#xe639;</span>
            </div>
            <img
              @click="clickStopRecord"
              v-show="recordStatus == 'RECORDING'"
              class="c-ww160 c-hh160"
              :src="require('@/assets/i/wap/course/audio_record.gif')"
              alt=""
            />
            <div
              class="c-flex-row c-aligni-center"
              v-show="recordStatus == 'RECORD_END'"
            >
              <div
                class="c-textAlign-c pr100 c-fs22"
                :class="isPlayTest ? 'theme-fc':'fc-lgreen'"
                @click="clickTryListen"
              >
                <div class="iconfont c-fs40">&#xe993;</div>
                <div class="c-pt10">{{isWeiXin ? (isPlayTest ? '试听中':'试听') : ''}}</div>
              </div>
              <div
                @click="clickSentRecord"
                class="iconfont c-fc-white c-ww160 c-hh160 c-brp50 theme-bg c-flex-row c-flex-center bg-green c-opacity90 c-fs80"
              >&#xe824;</div>
              <div
                class="fc-lgreen c-fs22 c-pl100"
                @click="clickRecordAgain"
              >
                <div class="iconfont c-fs40">&#xe994;</div>
                <div class="c-pt10">重录</div>
              </div>
            </div>
            <div
              v-show="recordStatus == 'RECORD_START'"
              class="c-fs20 c-fc-gray c-pt24"
            >
              点击开始录音
            </div>
            <div
              v-show="recordStatus == 'RECORDING'"
              class="c-fs20 c-fc-gray c-pt24"
            >
              录音中，还能录
              <span class="fc-lgreen">{{60-recordTime}}s</span>
            </div>
            <div
              v-show="recordStatus == 'RECORD_END'"
              class="c-fs20 c-fc-gray c-pt24"
            >
              <span>本次录音共</span>
              <span class="fc-lgreen">{{recordTime}}s</span>
            </div>
          </div>
          <div
            v-if="isPublic == 1"
            class="c-fs20 c-flex-row c-aligni-center"
          >
            <span
              @click="clickCheckOnlyLook"
              class="iconfont c-pt4 c-fs20"
              v-show="!notOtherLook"
            >&#xe7a9;</span>
            <span
              @click="clickCheckOnlyLook"
              class="iconfont c-pt4 c-fs20 theme-fc"
              v-show="notOtherLook"
            >&#xe7ab;</span>
            <span
              @click="clickCheckOnlyLook"
              class="c-pl12"
            >该{{questionCustom == 1 ? '预约' : '问题'}}回答不允许被围观，仅{{questionCustom == 1 ? '预约' : '提问'}}用户可见</span>
          </div>
        </div>
        <!-- 回答视频 -->
        <div v-show="modalType == 3">
          <div class="c-textAlign-c c-pt120 c-pb60">
            <span
              class="iconfont fs128 theme-fc"
              v-if="uploadVideoList.length == 0"
              @click="clickUploadVideo"
            >&#xebd5;</span>
            <div
              v-if="uploadVideoList.length > 0"
              class="c-flex-row c-justify-sb"
            >
              <div
                class="c-p ww268 c-hh180 c-br10 c-mlr-auto"
                v-for="(item,index) in uploadVideoList"
                :key="index"
              >
                <div
                  @click="clickShowVideo(1,item.realUrl)"
                  class="c-p c-w100 c-h c-br10"
                >
                  <img
                    class="c-w100 c-br10"
                    src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png"
                    alt=""
                  />
                  <i
                    @click.stop="clickDelVideo(index)"
                    class="iconfont c-fs32 c-fc-sgray closeC c-pa c-p-t0 c-p-r-4"
                  >&#xe6ec;</i>
                </div>
              </div>
            </div>
            <my-loading
              :showLoading="showProgress"
              :text="uploadProgress"
            ></my-loading>
          </div>
          <div
            v-if="isPublic == 1"
            class="c-pt36 c-fs20 c-flex-row c-aligni-center"
            @click="clickCheckOnlyLook"
          >
            <span
              class="iconfont c-fs20"
              v-show="!notOtherLookArticle"
            >&#xe7a9;</span>
            <span
              class="iconfont c-fs20 theme-fc"
              v-show="notOtherLookArticle"
            >&#xe7ab;</span>
            <span class="c-pl12">该{{questionCustom == 1 ? '预约' : '问题'}}回答不允许被围观，仅{{questionCustom == 1 ? '预约' : '提问'}}用户可见</span>
          </div>
          <span
            @click="clickSubmitAsw"
            class="c-pv20 c-w100 c-fc-white theme-bg-gradient c-br40 c-textAlign-c c-center c-fs24"
            :class="uploadVideoList.length > 0 ? 'c-mt64' : 'c-mt90'"
          >提交答案</span>
          <input
            class="hide c-cursor-p needsclick"
            id="myUploadAnswer"
            type="file"
            accept="video/*"
            @change='onInputChange($event)'
          />
        </div>
        <!-- 回答图文 -->
        <div v-show="modalType == 1">
          <div class="c-pt10 modal-textarea c-bd1-mgray c-br10">
            <textarea
              @blur="blurInput"
              @focus="focusTextarea"
              v-model="answerText"
              :maxlength="1024"
              class="needsclick"
              placeholder="输入您的答案或者相关文本内容"
            ></textarea>
            <div class="c-w100 c-lh c-pt10 c-pb10 c-textAlign-r c-fs18 c-fc-gray">{{answerText.length}}/1024</div>
          </div>
          <div class="c-flex-row c-flexw-wrap">
            <div class="c-ww100 c-hh100 c-bg-sgray c-flex-row c-aligni-center c-justify-center c-p c-mt40" v-if="uploadImgList.length < 9">
              <div
                class="c-ww100 c-hh100 c-bg-sgray c-flex-row c-aligni-center c-justify-center"
                @click="clickChoosePic"
              >
                <span class="c-fs64 c-fc-sgray">+</span>
              </div>
              <input
                class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww100 c-hh100 c-fs10"
                v-if="!isWeiXin"
                id="uploadImg"
                ref="uploadImg"
                name="file"
                type="file"
                accept="image/*"
                @change="clickChoosePic($event)"
              />
            </div>
            <div
              class="c-mt40"
              v-for="(item,index) in uploadImgList"
              :key="index"
            >
              <div
                class="c-ww100 c-hh100 c-flex-row c-flex-center c-p c-ml16"
              >
                <div
                  @click="delUploadImage(index)"
                  v-show="item != 'uploadQaImg'"
                  class="iconfont upload-img-del c-fs28 fc-d8 c-bg-white c-pz100 c-brp50"
                >&#xe6ec;</div>
                <img
                  @click="clickPreviewImage(item,uploadImgList)"
                  class="c-ww100 c-hh100 c-bd1"
                  :src="$addXossFilter(item)"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            v-if="isPublic == 1"
            class="c-mt40 c-fs20 c-flex-row c-aligni-center"
            @click="clickCheckOnlyLook"
          >
            <span
              class="iconfont c-fs20"
              v-show="!notOtherLookArticle"
            >&#xe7a9;</span>
            <span
              class="iconfont c-fs20 theme-fc"
              v-show="notOtherLookArticle"
            >&#xe7ab;</span>
            <span class="c-pl12">该{{questionCustom == 1 ? '预约' : '问题'}}回答不允许被围观，仅{{questionCustom == 1 ? '预约' : '提问'}}用户可见</span>
          </div>
          <span
            @click="clickSubmitAsw"
            class="c-pv20 c-w100 c-fc-white theme-bg-gradient c-br40 c-textAlign-c c-center c-fs24"
            :class="uploadImgList.length > 5 ? 'c-mt30' : 'c-mt90'"
          >提交答案</span>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import OpenModal from "@/components/templates/common/openModal.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import myLoading from "@/plugin/loading/loading.vue";
import record from "@/utils/recorder.js";
import TcVod from "vod-js-sdk-v6";
let isPlayTest = false; //是否试听
let recordTimeCon; //录音计时控制器
let curPlayLocalId = ""; //当前播放本地音频ID
let currentLocalId = ""; //当前录制本地音频ID
let audioServerId = ""; //音频serverId
let imgData = {};
let uploader = null;
let serverIdImgArr = []; //临时存放的上传图片searveID
let isClicking = false;
export default {
  name: "CircleModalAnswer",
  props: {
    curChaseId: {
      type: String,
      default: ""
    },
    isPublic: {
      type: String,
      default: 1,
    },
    curAswQuestionDetailId: {
      type: String,
      default: ""
    },
    showAnswerModal: {
      type: Boolean,
      default: false
    },
    isUpoloadVideo: {
      type: Boolean,
      default: false
    }
  },
  components: {
    OpenModal,
    MySmallTabbar,
    myLoading,
  },
  data() {
    return {
      isShowPf: true, //防止安卓手机输入文字时被顶上去
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      tabMediaList: [
        { title: '语音回答', index: 2 },
        { title: '视频回答', index: 3 },
        { title: '图文回答', index: 1 },
      ],
      modalType: 2, //回答弹窗的tab
      recordStatus: "RECORD_START", //录音状态
      isWeiXin: true,
      qiniuInfo: {}, //录音完后的音频上传到七牛，这里是七牛的相关信息
      notOtherLook: false,
      notOtherLookArticle: false,
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
      playAduioSrc: "", //播放音频地址
      recordTime: 0,
      blob: '', //录音之后要上传七牛的音频文件
      uploadVideoList: [],
      imageCount: 9,
      answerText: "", //弹窗回答的内容
      uploadImgList: [],
      showVideo: false,
      showProgress: false,
      uploadProgress: '0',
      isPlayingAudio: false,
      isReply: 0,
      currentVideoObj: {},
      videoMp4: '',
    }
  },
  mounted() {
    if (document.getElementById("audioAnswer")) {
      document.getElementById("audioAnswer").src = '';
    }
    this.isWeiXin = utilJs.isWeiXin();
    curPlayLocalId = ""; //当前播放本地音频ID
    currentLocalId = ""; //当前录制本地音频ID
    isPlayTest = false; //是否试听
    audioServerId = ""; //音频serverId
    this.initData();
    //解决ios播放没声音
    try {
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          document.getElementById("audioAnswer").play();
        },
        false
      );
      WeixinJSBridge.invoke('getNetworkType', {}, function (e) {// eslint-disable-line
        // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
        // document.getElementById("audio").play();
      });
    } catch (error) {
      // continue regardless of error
    }
    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
        imgData = res;
      });
      utilJs.getMethod(global.apiurl + "common/qiniu/uploadToken", res => {
        this.qiniuInfo.qiNiuToken = res;
      });
    }
    if (utilJs.isAdnroidBrower()) {
      window.addEventListener('resize', this.watchResize);
    }
  },
  deactivated() {
    clearInterval(recordTimeCon);
    this.stopListenAudio();
    this.playAduioSrc = "";
    if (document.getElementById("audioAnswer")) {
      document.getElementById("audioAnswer").src = '';
    }
    if (!this.isWeiXin && record != null) {
      record.recClose();
    }
    if (utilJs.isAdnroidBrower()) {
      window.removeEventListener('resize', this.watchResize);
    }
  },
  watch: {
    showHeight: function () {
      if (utilJs.isAdnroidBrower()) {
        if (this.docmHeight == this.showHeight) {
          this.isShowPf = true;
        }
      }
    }
  },
  methods: {
    watchResize() {
      //实时变化的窗口高度
      this.showHeight = document.documentElement.clientHeight;
    },
    initData() {
      clearInterval(recordTimeCon); //录音计时控制器
      this.imageCount = 9;
      this.modalType = 2; //回答弹窗的tab
      this.showAnswerModal = false; //显示回答弹窗
      this.answerText = ""; //弹窗回答的内容
      this.recordStatus = "RECORD_START"; //录音状态
      this.playAduioSrc = ""; //播放音频地址
      this.uploadImgList = [];
      this.recordTime = 0;
      this.notOtherLook = false;
      this.notOtherLookArticle = false;
      this.showVideo = false;
      this.uploadVideoList = [];
      this.showProgress = false;
      this.uploadProgress = '0';
      this.isPlayingAudio = false;
      this.isReply = 0;
      this.currentVideoObj = {};
      uploader = null;
      this.videoMp4 = "";
      this.isShowPf = true;
    },
    checkInput() {
      if (
        this.modalType == 1 &&
        this.answerText &&
        this.answerText.length < 1
      ) {
        this.$showCjToast({
          text: "请输入大于1个字符的答案内容",
          type: "warn",
        });
        return false;
      } else if (this.modalType == 3 && this.uploadVideoList.length == 0) {
        this.$showCjToast({
          text: "请添加视频",
          type: "warn",
        });
        return false;
      } else if (
        this.modalType == 1 &&
        !this.answerText &&
        this.uploadImgList.length == 1
      ) {
        this.$showCjToast({
          text: "请输入提问内容(支持图文、音频、视频)!",
          type: "warn",
        });
        return false;
      } else {
        return true;
      }
    },
    clickSubmitAsw() {
      if (!this.checkInput()) {
        return;
      }
      if (isClicking) {
        return;
      }
      isClicking = true;
      //去掉图片中含有upload的item
      let imgUrlListJson = "";
      let isPublic = 1;
      if (this.modalType == 1) {
        isPublic = this.notOtherLookArticle ? -1 : 1;
        imgUrlListJson = JSON.stringify(this.uploadImgList);
      } else {
        isPublic = this.notOtherLook ? -1 : 1;
      }
      utilJs.postMethod(
        global.apiurl + "question/submitSolution",
        {
          type: this.curChaseId ? 2 : 1,
          questionDetailId: this.curChaseId || this.curAswQuestionDetailId,
          answerType: this.modalType,
          imgUrl: this.modalType == 1 ? imgUrlListJson : "",
          content: this.modalType == 1 ? this.answerText : "",
          isHidden: isPublic,
          serverId: this.modalType == 2 ? audioServerId : "",
          recordTime: this.modalType == 2 ? this.recordTime : "",
          videoId: this.modalType == 3 ? this.uploadVideoList[0].url : "",
          videoMp4: this.modalType == 3 ? this.videoMp4 : "",
        },
        res => {
          isClicking = false;
          if (res) {
            this.$showCjToast({
              text: "回答成功",
              type: "success",
            });
            this.isUpoloadVideo = false;
            this.initData();
            this.$emit("clickSubmitAsw")
            // this.getQuestionIfno();
          }
        },
        failRes => {
          isClicking = false;
        }
      );
    },
    //上传图片到服务器
    syncUploadPic(serverIdArr) {
      utilJs.postMethod(
        global.apiurl + "question/downWxMedia",
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          if (res.length > 0) {
            this.uploadImgList = [...this.uploadImgList, ...res];
            this.imageCount = 9 - this.uploadImgList.length;
          }
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength) {
      wxUtilJs
        .uploadImage({ localId: localIds[localIdsLength] }, true)
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength);
          } else {
            this.syncUploadPic(serverIdImgArr);
          }
        });
    },
    clickChoosePic(event) {
      if (this.isWeiXin) {
        wxUtilJs.chooseImage({
          count: this.imageCount, // 默认9
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"] // 可以指定来源是相册还是相机，默认二者都有
        }).then(localIds => {
          this.uploadImgList.pop();
          localIds.reverse();
          this.$loading.show({
            text: "上传中..."
          });
          serverIdImgArr = [];
          //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
          let residueLength = 9 - this.uploadImgList.length;
          if (localIds.length > residueLength) {
            localIds.length = residueLength;
          }
          this.wxUploadImg(localIds, localIds.length - 1);
        });
      } else {
        utilJs.imgUpload(event.target.files, imgData, 'qa', res => {
          if (res.length > 0) {
            this.uploadImgList.push(res);
            document.getElementById("uploadImg").value = null;
          }
        }, fRes => { });
      }
    },
    //点击图片放大预览
    clickPreviewImage(imgUrl, itemImgList) {
      if (!imgUrl || imgUrl == "uploadQaImg") {
        return;
      }
      let imgUrlList = [];
      itemImgList = itemImgList.filter(item => {
        return item != 'uploadQaImg'
      })
      for (let key of itemImgList) {
        if (key) {
          imgUrlList.push(key);
        }
      }

      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
    },
    //删除上传的图片
    delUploadImage(index) {
      this.uploadImgList.splice(index, 1);
      this.imageCount = 9 - this.uploadImgList.length;
    },
    //聚集焦点
    focusTextarea(e) {
      if (utilJs.isAdnroidBrower()) {
        this.isShowPf = false;
      }
    },
    //输入框失去焦点
    blurInput(e) {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = 0;
        });
      }
      if (utilJs.isAdnroidBrower()) {
        this.isShowPf = true;
      }
    },
    clickUploadVideo() {
      console.log("222211111")
      document.getElementById("myUploadAnswer").click();
    },
    // 删除视频
    clickDelVideo(index) {
      this.uploadVideoList.splice(index, 1);
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
        if (this.isReply == 1 && this.isUpoloadVideo == true) {
          this.showAnswerModal = true;
        }
      }
    },
    //点击显示视频
    clickShowVideo(isReply, videoSrc, m3u8Url) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      if (isReply == 1) {
        this.isReply = 1;
      }
      this.showAnswerModal = false;
      this.$emit("clickShowVideoAnswer", videoSrc)
      // this.showVideo = true;
      // this.currentVideoObj = { videoSrc, m3u8Url }
    },
    // 获取得到的文件file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 1024) {
        this.$showCjToast({
          text: "视频文件大小不能超过1G",
          type: "warn",
        });
        return false;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile);
      }
    },
    //保存视频
    videoFirstSave(data) {
      utilJs.postMethod(global.apiurl + "signCard/videoFirstSave", data, (res) => { });
    },
    uploadVideoToTencent(inputFile) {
      let that = this;
      this.showProgress = true;
      const tcVod = new TcVod({
        // eslint-disable-line
        getSignature: utilJs.getVideoSign
      });
      uploader = tcVod.upload({
        mediaFile: inputFile // 媒体文件（视频或音频或图片），类型为 File
      });
      uploader.on("media_progress", function (info) {
        that.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`;
      });
      uploader
        .done()
        .then(function (result) {
          that.videoMp4 = result.video.url;
          that.showProgress = false;
          let videoInfo = {
            url: result.fileId,
            realUrl: result.video.url
          };
          that.uploadVideoList.push(videoInfo);
          let data = {
            videoId: result.fileId,
            videoMp4: result.video.url,
            videoName: inputFile.name
          };
          that.videoFirstSave(data);
          that.uploadProgress = '0';
          document.getElementById("myUploadAnswer").value = null;
        })
        .catch((err) => {
          that.showProgress = false;
          that.$showCjToast({
            text: "上传失败，请尝试重新上传",
            type: "warn",
          });
          that.uploadProgress = '0';
          document.getElementById("myUploadAnswer").value = null;
          let errorData = {
            errorMsg: JSON.stringify(err),
            errorType: "UPLOAD_VIDEO_ERROR"
          };
          utilJs.reprotError(errorData);
        });
    },
    //点击选择框是否允许围观
    clickCheckOnlyLook() {
      if (this.modalType == 2) {
        this.notOtherLook = !this.notOtherLook;
      } else {
        this.notOtherLookArticle = !this.notOtherLookArticle;
      }
    },
    // 点击重录
    clickRecordAgain() {
      this.recordStatus = "RECORD_START";
    },
    // 点击试听
    clickTryListen() {
      if (!this.isWeiXin) {
        return;
      }
      isPlayTest = true;
      this.playAduioSrc = "";
      document.getElementById("audioAnswer").src = this.playAduioSrc;
      wxUtilJs.playVoice({ localId: currentLocalId });
    },
    // 点击发送录音
    clickSentRecord() {
      this.showAnswerModal = false;
      this.recordStatus = "RECORD_START";
      if (isPlayTest) {
        wxUtilJs.stopVoice({ localId: currentLocalId });
        isPlayTest = false;
      }
      if (this.isWeiXin) {
        wxUtilJs.uploadVoice({ localId: currentLocalId }).then(serverId => {
          audioServerId = serverId;
          this.clickSubmitAsw();
        });
      } else {
        record.uploadAudioFile(this.blob, this.qiniuInfo, sres => {
          audioServerId = sres;
          this.clickSubmitAsw();
        }, () => { });
      }
    },
    // 点击停止录音
    clickStopRecord() {
      this.recordStatus = "RECORD_END";
      clearInterval(recordTimeCon);
      if (this.isWeiXin) {
        wxUtilJs.stopRecord().then(localId => {
          currentLocalId = localId;
        });
      } else {
        record.recStop(res => {
          this.blob = res;
        });
      }
      if (this.recordTime < 1) {
        this.$showCjToast({
          text: "录音时间太短",
          type: "warn",
        });
        this.recordStatus = "RECORD_START";
      }
    },
    // 点击开始录音
    clickStartRecord() {
      this.recordStatus = "RECORDING";
      this.playAduioSrc = "";
      document.getElementById("audioAnswer").src = this.playAduioSrc;
      this.stopListenAudio();
      if (this.isWeiXin) {
        wxUtilJs.startRecord();
        recordTimeCon = setInterval(() => {
          if (this.recordTime < 60) {
            this.recordTime++;
          } else {
            clearInterval(recordTimeCon);
            this.recordStatus = "RECORD_END";
          }
        }, 1000);
        wxUtilJs.onVoiceRecordEnd().then(localId => {
          this.recordStatus = "RECORD_END";
          clearInterval(recordTimeCon);
          currentLocalId = localId;
        });
      } else {
        record.recOpen(() => {
          record.recStart();
          recordTimeCon = setInterval(() => {
            if (this.recordTime < 60) {
              this.recordTime++;
            } else {
              clearInterval(recordTimeCon);
              this.recordStatus = "RECORD_END";
            }
          }, 1000);
          record.recVoiceRecordEnd(res => {
            this.recordStatus = "RECORD_END";
            clearInterval(recordTimeCon);
            this.blob = res;
          });
        }, () => {
          this.recordStatus = "READY";
        });
      }
    },
    //停止试听
    stopListenAudio() {
      if (isPlayTest) {
        wxUtilJs.stopVoice({ localId: currentLocalId });
        isPlayTest = false;
      } else {
        wxUtilJs.stopVoice({ localId: curPlayLocalId });
      }
    },
    changeModalType(type) {
      this.modalType = type;
    },
    closeAnswerModal() {
      if (this.recordStatus != "RECORD_START" || this.uploadVideoList.length > 0 || this.answerText != "" || this.uploadImgList.length > 0) {
        let that = this;
        this.$cjConfirm({
          title: '提示',
          titleCenter: true,
          message: '关闭弹窗后，会清除填写的内容，确定要关闭弹窗?',
          messageCenter: true,
          showMasker: true,
          clickCloseModal: false,
          showCancelButton: true,
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          onConfirm() {
            that.stopListenAudio();
            that.recordStatus = "RECORD_START";
            that.uploadVideoList = [];
            that.answerText = '';
            that.uploadImgList = [];
            that.isReply = 0;
            that.modalType = 2;
            // that.showAnswerModal = false;
            that.$emit("closeAnswerModal")
          }
        })
      } else {
        this.modalType = 2;
        // this.showAnswerModal = false;
        this.$emit("closeAnswerModal")
      }
      this.isUpoloadVideo = false;
    },
  }
}
</script>

<style lang="less" scoped>
.modal-textarea {
  padding: 0.5rem 0.7rem 0.35rem 0.7rem;
  width: 100%;
  height: 4em;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}
.modal-textarea textarea {
  font-size: 0.6rem;
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  background: none;
  border-radius: 2px;
  -webkit-appearance: none;
  resize: none;
}
.modal-textarea textarea:focus {
  outline: none;
}

.modal-textarea textarea::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ccc;
}
.upload-img-del {
  position: absolute;
  right: -0.35rem;
  top: -0.25rem;
  color: #d8d8d8;
}
.fs128 {
  font-size: 3.2rem;
}
.ww268 {
  width: 6.7rem;
}
.fc-lgreen {
  color: #6ddc73;
}
.bg-green {
  background: #6ddd73;
}
.pr100 {
  padding-right: 2.5rem;
}
</style>